/* ==========================================================================
   Atlas layout

   The core stucture of all atlas layouts
========================================================================== */
.layout-atlas {
    // Toggle button
    .toggle-btn > img,
    .toggle-btn > .glyphicon {
        margin: 0;
    }
    .mx-scrollcontainer-open {
        .expand-btn > img {
            transform: rotate(180deg);
        }
    }

    // Sidebar
    .region-sidebar {
        background-color: $navsidebar-bg;
        z-index: 101;
        position: relative;
        box-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%);
        .mx-scrollcontainer-wrapper {
            display: flex;
            flex-direction: column;
            padding: $spacing-small 0;
        }
        .mx-navigationtree .navbar-inner > ul > li > a {
            padding: $spacing-medium;
            .glyphicon {
                margin-right: $spacing-small;
            }
        }
        .sidebar-heading {
            background: $navsidebar-sub-bg;
        }
        .toggle-btn {
            margin-right: $spacing-small;
            border-color: transparent;
            border-radius: 0;
            background: transparent;
            padding: $spacing-medium;
        }
    }

    // Topbar
    .region-topbar {
        position: relative;
        z-index: 1; // Show dropshadow
        min-height: $topbar-minimalheight;
        background-color: $navtopbar-bg;
        box-shadow: 0px 2px 2px rgba(194, 196, 201, 0.30354);

        // Topbar Content
        .topbar-content {
            display: flex;
            align-items: center;
            min-height: $topbar-minimalheight;
        }

        // Toggle btn
        .toggle-btn {
            margin-right: $spacing-medium;
        }

        // For your company, product, or project name
        .navbar-brand {
            display: inline-block;
            float: none; // reset bootstrap
            height: auto;
            padding: 0;
            line-height: inherit;
            font-size: 16px;
            margin-right: $spacing-small;

            img {
                display: inline-block;
                margin-right: $spacing-small;
                @if $brand-logo !=false {
                    width: 0;
                    height: 0;
                    padding: ($brand-logo-height / 2) ($brand-logo-width / 2);
                    background-image: url($brand-logo);
                    background-repeat: no-repeat;
                    background-position: left center;
                    background-size: $brand-logo-width;
                } @else {
                    width: auto;
                    height: $brand-logo-height;
                }
            }

            a {
                margin-left: $spacing-small;
                color: $navbar-brand-name;
                font-size: 20px;

                &:hover,
                &:focus {
                    text-decoration: none;
                }
            }
        }
        .mx-navbar {
            display: inline-flex;
            vertical-align: middle;
            background: transparent;
            justify-content: center;
            align-items: center;

            & > .mx-navbar-item {
                & > a {
                    margin-top: 5px;
                    padding: 0 20px;
                }
            }
        }
    }
    .mx-scrollcontainer-slide {
        &:not(.mx-scrollcontainer-open) > .region-sidebar {
            overflow: hidden;
        }
    }
}
